<!-- 注册 -->
<template>
  <div class="register">
    <van-nav-bar title="注册" @click-left="() => $router.go(-1)" left-arrow safe-area-inset-top>
    </van-nav-bar>

    <div class="form">
      <van-form ref="form">
        <van-field center v-model="form.phone" name="手机号" maxlength="11" type="tel" placeholder="请输入手机号" autocomplete="off"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/手机 (1).png" alt="" />
            </div>
          </template>
        </van-field>
        <van-field v-model="form.code" type="number" name="验证码" placeholder="请输入验证码" autocomplete="off"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/验证码.png" alt="" />
            </div>
          </template>
          <template #button>
            <van-button plain native-type="button" size="small" type="info" :disabled="disabled" round @click="sendCode">
              {{  codeMsg  }}</van-button>
          </template>
        </van-field>
        <van-field center v-model="form.password" :type="type1" name="密码" placeholder="请输入密码" autocomplete="off"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/密码.png" alt="" />
            </div>
          </template>
          <template #right-icon>
            <van-icon v-if="type1 == 'password'" name="closed-eye" @click="click1(1)" />
            <van-icon v-else name="eye-o" @click="click1(1)" />
          </template>
        </van-field>
        <van-field center v-model="form.password2" :type="type2" name="密码" placeholder="请输入确认密码"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/密码.png" alt="" />
            </div>
          </template>
          <template #right-icon>
            <van-icon v-if="type2 == 'password'" name="closed-eye" @click="click1(2)" />
            <van-icon v-else name="eye-o" @click="click1(2)" />
          </template>
        </van-field>
      </van-form>
    </div>
    <div class="reg" @click="() => $router.push({ path: '/login' })">登 录</div>
    <div class="bottom">
      <van-button round block type="info" @click="onSubmit"
        color="linear-gradient(to right, rgb(120, 184, 246), rgb(29,97,214))" style="font-size: 20px">注 册</van-button>
      <!-- <div class="xieyi">
        <van-checkbox v-model="checked" checked-color="rgb(229,124,110)">我已阅读并同意 <span>&lt;&lt;用户协议&gt;&gt;</span>
        </van-checkbox>
      </div> -->
    </div>
  </div>
</template>

<script>
import { reg,getCode } from "../../api/index";

export default {
  name: "",
  data() {
    return {
      swit: true,
      checked: false,
      disabled: false,
      codeNum: null,
      codeMsg: "获取验证码",
      form: {
        code: "",
        phone: "",
        password: "",
        password2: "",
      },
      type1: "password",
      type2: "password",
    };
  },
  methods: {
    // 获取验证码
    sendCode() {
      this.$refs.form
        .validate("手机号")
        .then(() => {
          // 验证通过
          console.log("通过");

          getCode({phone:this.form.phone});
          // 禁用按钮
          this.disabled = true;
          this.codeNum = 60;
          // 倒计时
          let timer = setInterval(() => {
            if (this.codeNum == 0) {
              clearInterval(timer);
              this.disabled = false;
              this.codeMsg = "获取验证码";
            } else {
              --this.codeNum;
              this.codeMsg = `重新获取(${this.codeNum})`;
            }
          }, 1000);
        })
        .catch(() => {
          // 验证不通过
        });
    },
    onSubmit(values) {
      console.log("submit", this.$refs.form);
      this.$refs.form
        .validate()
        .then(async (res1) => {
          // 表单验证通过
          console.log(res1);


          let res = await reg(this.form);
          console.log(res);
          if (res.status == 200) {
            this.$toast.fail('注册成功')
            this.$router.push({ path: '/login', query: { } });

          }


        })
        .catch((err) => {
          // 表单验证不通过
          console.log("cuole", err);
        });
    },
    click1(val) {
      this["type" + val] == "password"
        ? (this["type" + val] = "text")
        : (this["type" + val] = "password");
    },
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  position: relative;

  .form {
    width: 90%;
    border: 1px solid #eee;
    margin: 50px auto;
    box-shadow: 0 0 10px rgb(223, 237, 248);
    border-radius: 15px;

    .icon {
      width: 100px;
      text-align: center;
      border-right: 1px solid #daf2fd;
      margin-right: 20px;

      img {
        width: 50px;
        height: 50px;
      }
    }
  }

  .reg {
    width: 90%;
    text-align: right;
    color: rgb(113, 113, 113);
  }

  .bottom {
    margin: 16px;
    width: 90%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    bottom: 5%;
    left: 2.5%;

    .xieyi {
      width: 90%;
      display: flex;
      justify-content: center;

      span {
        color: rgb(229, 124, 110);
      }
    }
  }
}
</style>